<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box{
			display: none;
		}
		.fl{
			float: left;
		}
	</style>
</head>
<body class="body">
	<div class="fl">
		<button class="first">一级菜单1</button>
		<div class="box">
			<button>二级菜单2</button><br>
			<button>三级菜单3</button><br>
			<button>四级菜单4</button><br>
		</div>
	</div>
	<div class="fl">
		<button class="second">一级菜单1</button>
		<div class="box">
			<button>二级菜单2</button><br>
			<button>三级菜单3</button><br>
			<button>四级菜单4</button><br>
		</div>
	</div>
	<div class="fl">
		<button class="three">一级菜单1</button>
		<div class="box">
			<button>二级菜单2</button><br>
			<button>三级菜单3</button><br>
			<button>四级菜单4</button><br>
		</div>
	</div>
	<!-- <p class="p1">一级菜单1</p>
	<p>二级菜单2</p>
	<p>三级菜单3</p>
	<p>四级菜单4</p> -->
</body>
<script src="../jquery-3.3.1.min.js"></script>
<script>

	var btn = $(".fl>button");

	//获取到box
	var box = $(".box");
	for(var i = 0;i<btn.length;i++){

		btn[i].index = i;

		$(btn[i]).mouseover(function(){

			$(box[this.index]).attr("display","block");

			$(box[this.index]).slideDown(1000);
		})

		$(btn[i]).mouseout(function(){

			$(box[this.index]).attr("display","none");

			$(box[this.index]).slideUp(1000);
		})
}

</script>
</html>